<script setup>
const showPicker = ref(false);
const types = ['平台配置', '项目配置'];
const onConfirm = (value) => {
  configType.value = value;
  showPicker.value = false;
};

const fKey = ref('');
const fValue = ref('');
const configType = ref('');
const configCue = ref('');
const configDesc = ref('');
const onSubmit = () => {
  console.log('submit');
};
</script>

<template>
  <XPage class="page-main" header title="配置信息">
    <van-form class="form-card" @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="fKey" label="配置名称" placeholder="请输入" />
        <van-field
          v-model="configType"
          label="配置项类别"
          placeholder="选择配置项"
          readonly
          is-link
          @click="showPicker = true"
        />
        <van-field v-model="fValue" label="配置项内容" placeholder="请输入" />
        <van-field v-model="configDesc" label="配置项描述" placeholder="请输入" />
        <van-field v-model="configCue" label="配置项提示" placeholder="请输入" />
      </van-cell-group>
      <div class="form-buttons">
        <van-button native-type="submit" type="primary" block>保存</van-button>
      </div>
    </van-form>
    <van-popup :show="showPicker" round position="bottom">
      <van-picker :columns="types" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
  </XPage>
</template>

<style lang="stylus" scoped>
.page-main

  .form-card
    margin-top 8px

    .form-buttons
      margin 12px 16px
</style>
